<template>
  <div class="login">
    <!-- <navbar :title="'登录'"></navbar> -->
    <div class="container">
      <p class="header">会员平台登录</p>

      <div class="content">
        <div class="logo">
          <img :src="defaultLogo" alt />
        </div>

        <div class="login-info">
          <div class="username">
            <input v-model="username" type="text" placeholder="请输入用户名" />
          </div>
          <div class="password">
            <input v-model="password" type="password" placeholder="请输入密码" />
            <p @click="goToForgetPassword">忘记密码？</p>
          </div>
        </div>
      </div>

      <div class="submit">
        <van-button type="info" size="large" @click="login" :disabled="isSubmitting" :loading="isSubmitting" :loading-text="'正在登录'">{{isSubmitting ? '正在登录' : '登录'}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Toast } from "vant";
import navbar from "../components/navbar.vue";
const md5 = require("js-md5");
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
import { defaultLogo } from "../service/default_source.js";

export default {
  components: {
    vanButton: Button,
    navbar
  },
  data() {
    return {
      username: "",
      password: "",
      defaultLogo: defaultLogo,
      isSubmitting: false,
    };
  },
  computed: {
    ...mapState({
      userinfo: state => state.login_module.userinfo,
      countAlias: "userinfo"
    })
  },
  mounted() {},
  methods: {
    // 跳转到忘记密码
    goToForgetPassword() {
      this.$router.push({
        path: "/forget_password"
      }).catch(err => {console.log(err)});
    },

    // 登录操作
    login() {
      if(!this.username || !this.password){
        Toast("账号密码不能为空");
        return false
      }

      if(this.isSubmitting){
        Toast('正在登录，请稍等')
        return false
      }

      // Toast('正在登录，请稍等')
      this.isSubmitting = true
      http
        .post(urls.LOGIN, {
          name: this.username,
          password: md5(this.password)
        })
        .then(res => {
          console.log(res);
          this.isSubmitting = false
          if (res.data.code == 200) {
            Toast.success("登录成功");

            delete res.data.data.password;
            let userInfo = res.data.data;

            // 使用localStorage记录登录信息
            localStorage.setItem("httpToken", userInfo.token);
            localStorage.setItem("userID", userInfo.id);
            localStorage.setItem("userInfo", JSON.stringify(userInfo));
            this.$store.commit("setUserInfoFromLocalStorage", userInfo);

            setTimeout(() => {
              this.$router.push({
                path: "/home/my"
              });
            }, 1000);
          } else {
            Toast(res.data.msg);
          }
        });
    }
  }
};
</script>

<style scoped>
.login {
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.header {
  font-size: 1.5rem;
  margin-top: 30px;
}

.content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-top: 60px;
  position: relative;
  border-radius: 10px;
}

.logo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  /* border: 1px solid #d1e0f0; */
  width: 100px;
  height: 100px;
  margin-top: 10px;
  top: 0;
  transform: translateY(-50%);
  background-color: #fff;
}
.logo img {
  width: 100%;
  height: 100px;
}

.login-info {
  margin-top: 100px;
  background-color: #fff;
  width: 80%;
}

.login-info > div {
  margin-bottom: 20px;
}

.login-info input {
  border: 2px solid #eae9ea;
  border-radius: 6px;
  width: calc(100% - 17px * 2);
  padding: 10px 15px;
  transition: 0.2s;
}

.login-info input:focus {
  border: 2px solid #bfc5d7;
}

.password p {
  text-align: right;
  margin-top: 5px;
}

.username.password {
  display: flex;
  flex-direction: column;
}

.submit {
  width: 80%;
  margin-top: 30px;
}
</style>